<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>小菜园AI小助手</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #DAF7E6;
            color: #333;
            height: 100vh;
            overflow: hidden;
            background-image:
                radial-gradient(#b8e6c1 1px, transparent 1px),
                radial-gradient(#b8e6c1 1px, transparent 1px);
            background-size: 50px 50px;
            background-position: 0 0, 25px 25px;
        }

        /* 聊天容器 */
        .chat-container {
            height: calc(100vh - 120px);
            overflow-y: auto;
            padding: 40px 20px 40px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        /* 滚动条美化 */
        .chat-container::-webkit-scrollbar {
            width: 6px;
        }

        .chat-container::-webkit-scrollbar-thumb {
            background-color: #c8e6c9;
            border-radius: 3px;
            transition: background-color 0.2s;
        }

        .chat-container::-webkit-scrollbar-thumb:hover {
            background-color: #a5d6a7;
        }

        /* 消息气泡 */
        .message {
            padding: 12px 16px;
            border-radius: 18px;
            line-height: 1.5;
            font-size: 15px;
            animation: fadeIn 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ai-message {
            background-color: #ffffff;
            border-bottom-left-radius: 8px;
            display: inline-block;
        }

        .ai-message::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: -8px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 16px 16px 0;
            border-color: transparent #ffffff transparent transparent;
            z-index: 1;
        }

        .user-message {
            background-color: #4caf50;
            color: white;
            border-bottom-right-radius: 8px;
            display: inline-block;
        }

        .user-message::before {
            content: '';
            position: absolute;
            bottom: 0;
            right: -8px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 16px 16px;
            border-color: transparent transparent transparent #4caf50;
            z-index: 1;
        }

        /* 输入区域 */
        .input-area {
            height: 70px;
            background-color: #DAF7E6;
            background-image:
                radial-gradient(#b8e6c1 1px, transparent 1px),
                radial-gradient(#b8e6c1 1px, transparent 1px);
            background-size: 50px 50px;
            background-position: 0 0, 25px 25px;
            border-top: 1px solid #c8e6c9;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
        }

        .input-container {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .message-input {
            flex: 1;
            height: 40px;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            padding: 0 20px;
            font-size: 15px;
            outline: none;
            transition: all 0.2s;
            background-color: #f9f9f9;
        }

        .message-input:focus {
            border-color: #4caf50;
            background-color: #ffffff;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        /* 发送按钮样式 - 文字按钮设计 */
        .send-button {
            min-width: 68px;
            height: 40px;
            padding: 0 16px;
            border-radius: 20px;
            background: linear-gradient(145deg, #4caf50, #45a049);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow:
                0 2px 8px rgba(76, 175, 80, 0.3),
                0 1px 3px rgba(76, 175, 80, 0.2);
        }

        /* 点击波纹效果 */
        .send-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        /* 悬停效果 */
        .send-button:hover:not(:disabled) {
            background: linear-gradient(145deg, #45a049, #3d8b40);
            transform: translateY(-1px);
            box-shadow:
                0 4px 12px rgba(76, 175, 80, 0.4),
                0 2px 5px rgba(76, 175, 80, 0.3);
        }

        /* 点击效果 */
        .send-button:active:not(:disabled) {
            transform: translateY(1px);
            box-shadow:
                0 1px 4px rgba(76, 175, 80, 0.3),
                0 1px 2px rgba(76, 175, 80, 0.2);
        }

        /* 点击时显示波纹 */
        .send-button:active:not(:disabled)::before {
            width: 200px;
            height: 200px;
        }

        /* 禁用状态 */
        .send-button:disabled {
            background: #f0f0f0;
            color: #cccccc;
            cursor: default;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transform: none;
        }



        /* 打字动画 */
        .typing-indicator {
            display: flex;
            gap: 4px;
            padding: 10px 14px;
            background-color: #ffffff;
            border-radius: 18px;
            align-self: flex-start;
            border-bottom-left-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .typing-indicator::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: -8px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 16px 16px 0;
            border-color: transparent #ffffff transparent transparent;
            z-index: 1;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #4caf50;
            animation: typing 1.4s infinite ease-in-out both;
        }

        .typing-dot:nth-child(1) {
            animation-delay: 0s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0% {
                transform: translateY(0);
                opacity: 0.7;
            }

            28% {
                transform: translateY(-5px);
                opacity: 1;
            }

            44% {
                transform: translateY(0);
                opacity: 0.7;
            }
        }

        /* 头像样式 */
        .message-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 10px;
            box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
            animation: float 3s ease-in-out infinite;
            flex-shrink: 0;
            /* 防止头像在flex容器中被压缩 */
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-3px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .ai-message-wrapper {
            display: flex;
            align-items: flex-start;
            margin-top: 20px;
            gap: 10px;
        }

        .user-message-wrapper {
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
            margin-top: 20px;
            gap: 10px;
        }

        .user-message-wrapper .message-avatar {
            background-color: #2196f3;
            margin-right: 0;
            margin-left: 0;
        }

        .ai-message-wrapper .message-avatar {
            background-color: #4caf50;
            margin-right: 0;
            margin-left: 0;
        }

        /* 统一消息内容容器宽度 */
        .ai-message-wrapper .message-content,
        .user-message-wrapper .message-content {
            max-width: 75%;
        }

        /* 消息文本换行控制 */
        .message {
            white-space: pre-line;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* 用户消息特殊处理 - 已在上面的.user-message中设置 */

        /* 用户名样式 */
        .message-username {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
            font-weight: 500;
        }

        /* 用户消息的用户名 */
        .user-message-wrapper .message-username {
            text-align: right;
        }

        /* 建议问题卡片 */
        .suggestion-cards {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
            align-self: flex-start;
            max-width: 75%;
        }

        .suggestion-card {
            background-color: transparent;
            border: 1px solid #b8e6c1;
            border-radius: 16px;
            padding: 12px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            color: #444;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .suggestion-card:hover {
            background-color: rgba(184, 230, 193, 0.3);
            transform: translateX(5px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .suggestion-icon {
            font-size: 16px;
            flex-shrink: 0;
        }



        /* 响应式调整 */
        @media (max-width: 480px) {
            .chat-container {
                padding: 12px;
                gap: 12px;
            }

            .message {
                font-size: 14px;
                padding: 10px 14px;
            }

            /* 移动端消息容器宽度 */
            .ai-message-wrapper .message-content,
            .user-message-wrapper .message-content {
                max-width: 85%;
            }

            .suggestion-cards {
                max-width: 85%;
                /* 在小屏幕上增加建议卡片宽度 */
            }

            .ai-message-wrapper {
                align-items: flex-start;
                /* 在小屏幕上垂直对齐到顶部 */
            }
        }
    </style>
</head>

<body>
    <!-- 聊天内容区 -->
    <div class="chat-container" id="chatContainer">
        <div class="ai-message-wrapper">
            <div class="message-avatar">🌱</div>
            <div class="message-content">
                <div class="message-username">小菜园AI助手</div>
                <div class="message ai-message">你好！我是小菜园AI助手，有什么种植问题可以告诉我哦~ 比如病虫害识别、种植技巧、施肥建议等。</div>
            </div>
        </div>

        <!-- 建议问题卡片 -->
        <div class="suggestion-cards">
            <div class="suggestion-card" onclick="sendSuggestedMessage('最近适合种什么蔬菜？')">
                <span class="suggestion-icon">💡</span>
                <span>最近适合种什么蔬菜？</span>
            </div>
            <div class="suggestion-card" onclick="sendSuggestedMessage('如何防治蔬菜常见病虫害？')">
                <span class="suggestion-icon">🐛</span>
                <span>如何防治蔬菜常见病虫害？</span>
            </div>
            <div class="suggestion-card" onclick="sendSuggestedMessage('蔬菜浇水的正确方法是什么？')">
                <span class="suggestion-icon">💧</span>
                <span>蔬菜浇水的正确方法是什么？</span>
            </div>
        </div>
    </div>

    <!-- 输入区域 - 固定在底部 -->
    <div class="input-area">
        <div class="input-container">
            <input type="text" class="message-input" id="messageInput" placeholder="输入你的问题...">
            <button class="send-button" id="sendButton" disabled>发送</button>
        </div>
    </div>

    <style>
        /* 完整设置页面flex布局 */
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        /* 聊天容器占据剩余空间 */
        .chat-container {
            flex: 1;
            height: auto !important;
            overflow-y: auto;
        }

        /* 输入区域固定在底部 */
        .input-area {
            flex-shrink: 0;
            position: relative;
            z-index: 1000;
        }

        /* 确保聊天容器占据剩余空间 */
        .chat-container {
            flex: 1;
            overflow-y: auto;
        }

        .input-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        /* 调整输入框高度 */
        .message-input {
            height: 40px;
            flex: 1;
        }

        /* 调整发送按钮高度 */
        .send-button {
            height: 32px;
        }
    </style>

    <script>
        // DOM元素
        const chatContainer = document.getElementById('chatContainer');
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');

        // 蔬菜种植知识库 - 基于 VegetableModel.ets 扩展
        const vegetableKnowledge = {
            // 基础回复结构
            greetings: ["你好！", "嗨！", "很高兴见到你！", "欢迎来到小菜园！", "早上好！", "下午好！", "晚上好！", "你好呀！", "欢迎！", "很高兴为你服务！"],
            intros: ["我是小菜园AI助手", "我是你的蔬菜种植小助手", "我是专业的种植顾问", "我是你的菜园管家", "我是蔬菜种植专家", "我是你的种植伙伴", "我是菜园小精灵", "我是种植指导师"],
            helpOffers: ["有什么种植问题可以告诉我哦~", "有什么可以帮助你的吗？", "想了解什么种植知识呢？", "有什么蔬菜问题尽管问我！", "需要什么种植建议吗？", "有什么想了解的蔬菜知识？", "我可以为你解答种植问题", "有什么菜园疑问吗？"],

            // 日常问候和闲聊
            casualGreetings: ["今天天气不错呢！", "最近种了什么蔬菜吗？", "你的菜园怎么样？", "今天心情好吗？", "有什么新鲜事吗？", "最近收获了什么？", "你的植物长得怎么样？", "今天想聊什么呢？"],
            encouragements: ["加油！你一定可以的！", "种植需要耐心，慢慢来~", "每个种植者都是从新手开始的", "相信你的菜园会越来越好的", "坚持下去，收获会很棒的！", "你做得很好！", "种植是一件很有意义的事情", "你的努力会有回报的！"],
            compliments: ["你真是一个用心的种植者！", "你的问题问得很好！", "你对种植很有热情呢！", "你问得很专业！", "你真是个细心的园丁！", "你的菜园一定很漂亮！", "你很有种植天赋！", "你问的问题很有深度！"],

            // 浇水相关
            wateringTopics: ["浇水", "灌溉", "水分管理", "给水", "补水", "喷水"],
            wateringFrequencies: ["2-3天浇一次", "3-5天浇一次", "根据土壤湿度决定", "见干见湿", "保持微润", "每天少量浇水", "每周2-3次", "根据天气调整"],
            wateringTimes: ["早晨", "傍晚", "清晨", "下午", "避开中午", "日出前", "日落前", "避开强光时段"],
            wateringTips: ["用手指测试土壤湿度", "观察叶子状态", "避免积水", "浇透不浇漏", "叶面喷水", "根部浇水", "滴灌方式", "观察植物反应"],
            wateringVegetables: ["叶菜类", "根菜类", "果菜类", "豆类", "瓜类", "茄果类", "葱蒜类", "食用菌类"],

            // 施肥相关
            fertilizerTopics: ["施肥", "肥料", "营养", "追肥", "补肥", "营养管理"],
            fertilizerTypes: ["有机肥", "复合肥", "液肥", "堆肥", "豆饼肥", "鸡粪肥", "腐熟肥", "生物肥", "缓释肥", "叶面肥"],
            fertilizerFrequencies: ["2-3周一次", "每月一次", "生长期多施", "结果期增施", "薄肥勤施", "每周一次", "根据生长阶段", "定期追肥"],
            fertilizerStages: ["幼苗期", "生长期", "开花期", "结果期", "收获期", "定植期", "缓苗期", "成熟期"],
            fertilizerTips: ["稀释后使用", "避开根部", "雨后施肥", "配合浇水", "轮换施肥", "少量多次", "观察植物反应", "选择合适时机"],

            // 病虫害相关
            pestTopics: ["虫害", "病害", "病虫害", "防治", "预防", "治疗"],
            pestTypes: ["蚜虫", "红蜘蛛", "白粉虱", "菜青虫", "跳甲", "蓟马", "潜叶蝇", "夜蛾", "粉虱", "介壳虫"],
            diseaseTypes: ["白粉病", "霜霉病", "叶斑病", "根腐病", "枯萎病", "炭疽病", "疫病", "病毒病", "细菌性病害"],
            preventions: ["保持通风", "合理密植", "轮作种植", "清洁田园", "选用抗病品种", "定期检查", "及时清理", "保持卫生"],
            treatments: ["肥皂水喷洒", "辣椒水驱虫", "大蒜水杀菌", "小苏打溶液", "物理防治", "生物防治", "天然杀虫剂", "人工捕捉"],

            // 种植相关
            plantingTopics: ["种植", "播种", "栽培", "育苗", "定植", "移栽", "扦插", "分株"],
            plantingTimes: ["春季", "夏季", "秋季", "冬季", "现在这个季节", "早春", "晚秋", "全年可种"],
            plantingMethods: ["直播", "育苗移栽", "扦插", "分株", "嫁接", "压条", "组织培养"],
            plantingDepths: ["种子大小的2-3倍", "1-2厘米", "浅播", "深播", "0.5-1厘米", "2-3厘米", "根据种子大小"],
            plantingDistances: ["15-20厘米", "20-30厘米", "30-40厘米", "根据品种调整", "10-15厘米", "25-35厘米", "40-50厘米"],

            // 蔬菜种类 - 基于 VegetableModel.ets
            rootVegetables: ["白萝卜", "红萝卜", "青萝卜", "心里美萝卜", "樱桃萝卜", "红胡萝卜", "黄胡萝卜", "水果胡萝卜", "大头菜", "芜菁", "甜菜"],
            cabbageVegetables: ["大白菜", "上海青", "苏州青", "芥菜", "圆白菜", "牛心菜", "紫甘蓝", "红菜苔", "圆生菜", "罗马生菜", "散叶生菜", "油麦菜", "香菜"],
            solanaceousVegetables: ["大番茄", "小番茄", "水果番茄", "红色番茄", "黄色番茄", "粉色番茄", "长茄子", "圆茄子", "紫色茄子", "白色茄子", "绿色茄子", "花色茄子", "青椒", "螺丝椒", "小米椒", "朝天椒", "甜椒", "观赏椒"],
            cucurbitVegetables: ["普通黄瓜", "水果黄瓜", "旱黄瓜", "普通南瓜", "贝贝南瓜", "小金瓜", "冬瓜", "普通丝瓜", "有棱丝瓜", "苦瓜", "瓠瓜", "菜瓜", "西葫芦"],
            legumeVegetables: ["长豇豆", "短豇豆", "四季豆", "架豆", "嫩豌豆", "荷兰豆", "毛豆", "普通扁豆", "紫扁豆", "蚕豆"],
            leafyVegetables: ["尖叶菠菜", "圆叶菠菜", "西芹", "本芹", "茼蒿", "空心菜", "绿苋菜", "红苋菜", "莴笋", "蕹菜", "青韭菜", "韭黄", "雪里蕻"],
            alliumVegetables: ["大葱", "小葱", "火葱", "紫皮大蒜", "白皮大蒜", "黄洋葱", "红洋葱", "白洋葱", "韭菜", "蒜苔"],
            mushroomVegetables: ["冬菇", "花菇", "平菇", "金针菇", "黑木耳", "白木耳", "草菇", "蘑菇", "竹荪"],

            // 生长周期相关
            growthPeriods: ["25-35天", "30-40天", "35-45天", "40-50天", "45-60天", "50-60天", "60-80天", "70-90天", "80-100天", "90-120天", "100-120天", "120-150天"],
            growthStages: ["发芽期", "幼苗期", "生长期", "开花期", "结果期", "成熟期", "收获期"],

            // 营养相关
            nutrients: ["维生素C", "维生素A", "维生素K", "维生素B6", "膳食纤维", "蛋白质", "钾元素", "钙元素", "铁元素", "β-胡萝卜素", "番茄红素", "花青素", "大蒜素", "硫化物"],

            // 环境条件
            lightConditions: ["充足阳光", "中等光照", "避免强光", "每天6小时", "每天8小时", "遮光栽培", "不需要光照"],
            soilTypes: ["沙质土壤", "肥沃土壤", "疏松土壤", "排水良好", "中性土壤", "微酸性土壤", "富含有机质"],
            temperatureRanges: ["15-20℃", "15-25℃", "20-28℃", "20-30℃", "18-22℃", "15-22℃", "28-32℃"],
            humidityLevels: ["保持湿润", "避免干旱", "避免积水", "空气湿度85-95%", "土壤湿润"],

            // 季节相关
            currentSeasons: ["现在", "这个季节", "当前时期", "最近", "眼下", "目前"],
            seasonVegetables: ["耐寒蔬菜", "喜温蔬菜", "速生蔬菜", "耐热蔬菜", "春秋蔬菜", "夏季蔬菜", "冬季蔬菜"],

            // 收获相关
            harvestTips: ["及时收获", "分批收获", "观察成熟度", "选择最佳时机", "避免过熟", "保持新鲜", "储存方法"],
            harvestTimes: ["早晨", "傍晚", "阴天", "避开高温", "雨后", "干燥天气"]
        };

        // 随机选择函数
        function randomChoice(array) {
            return array[Math.floor(Math.random() * array.length)];
        }

        // 模板生成函数
        function generateResponse(template) {
            return template.replace(/#(\w+)#/g, (match, key) => {
                // 映射模板占位符到知识库键名
                const keyMapping = {
                    'greeting': 'greetings',
                    'intro': 'intros',
                    'helpOffer': 'helpOffers',
                    'casualGreeting': 'casualGreetings',
                    'encouragement': 'encouragements',
                    'compliment': 'compliments',
                    'wateringTopic': 'wateringTopics',
                    'wateringFrequency': 'wateringFrequencies',
                    'wateringTime': 'wateringTimes',
                    'wateringTip': 'wateringTips',
                    'wateringVegetable': 'wateringVegetables',
                    'fertilizerTopic': 'fertilizerTopics',
                    'fertilizerType': 'fertilizerTypes',
                    'fertilizerFrequency': 'fertilizerFrequencies',
                    'fertilizerStage': 'fertilizerStages',
                    'fertilizerTip': 'fertilizerTips',
                    'pestTopic': 'pestTopics',
                    'pestType': 'pestTypes',
                    'diseaseType': 'diseaseTypes',
                    'prevention': 'preventions',
                    'treatment': 'treatments',
                    'currentSeason': 'currentSeasons',
                    'seasonVegetable': 'seasonVegetables',
                    'rootVegetable': 'rootVegetables',
                    'cabbageVegetable': 'cabbageVegetables',
                    'solanaceousVegetable': 'solanaceousVegetables',
                    'cucurbitVegetable': 'cucurbitVegetables',
                    'legumeVegetable': 'legumeVegetables',
                    'leafyVegetable': 'leafyVegetables',
                    'alliumVegetable': 'alliumVegetables',
                    'mushroomVegetable': 'mushroomVegetables',
                    'plantingMethod': 'plantingMethods',
                    'plantingDepth': 'plantingDepths',
                    'plantingDistance': 'plantingDistances',
                    'plantingTopic': 'plantingTopics',
                    'plantingTime': 'plantingTimes',
                    'growthPeriod': 'growthPeriods',
                    'growthStage': 'growthStages',
                    'nutrient': 'nutrients',
                    'lightCondition': 'lightConditions',
                    'soilType': 'soilTypes',
                    'temperatureRange': 'temperatureRanges',
                    'humidityLevel': 'humidityLevels',
                    'harvestTip': 'harvestTips',
                    'harvestTime': 'harvestTimes'
                };

                const category = keyMapping[key];
                if (category && vegetableKnowledge[category]) {
                    return randomChoice(vegetableKnowledge[category]);
                }
                return match; // 如果找不到对应的键，返回原始占位符
            });
        }

        // 输入框状态监听
        messageInput.addEventListener('input', () => {
            sendButton.disabled = messageInput.value.trim() === '';
        });

        // 发送消息
        sendButton.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        // 发送消息函数
        function sendMessage() {
            const message = messageInput.value.trim();
            if (!message) return;

            // 添加用户消息
            const userWrapper = document.createElement('div');
            userWrapper.className = 'user-message-wrapper';

            const userContent = document.createElement('div');
            userContent.className = 'message-content';

            const userName = document.createElement('div');
            userName.className = 'message-username';
            userName.textContent = '我';

            const userMessage = document.createElement('div');
            userMessage.className = 'message user-message';
            userMessage.textContent = message;

            // 根据消息长度动态添加CSS类
            if (message.length > 15) {
                userMessage.classList.add('long-text');
            }

            const userAvatar = document.createElement('div');
            userAvatar.className = 'message-avatar';
            userAvatar.textContent = '👤';

            userContent.appendChild(userName);
            userContent.appendChild(userMessage);
            userWrapper.appendChild(userContent);
            userWrapper.appendChild(userAvatar);
            chatContainer.appendChild(userWrapper);

            // 清空输入框
            messageInput.value = '';
            sendButton.disabled = true;

            // 滚动到底部
            scrollToBottom();

            // 显示正在输入
            showTypingIndicator();

            // 模拟AI回复
            setTimeout(() => {
                // 移除正在输入指示器（修复：移除整个包装器而不仅仅是指示器）
                const typingWrapper = document.querySelector('.ai-message-wrapper:has(.typing-indicator)');
                if (typingWrapper) typingWrapper.remove();

                // AI回复内容
                const aiResponse = getAIResponse(message);

                // 添加AI消息
                const aiWrapper = document.createElement('div');
                aiWrapper.className = 'ai-message-wrapper';

                const avatar = document.createElement('div');
                avatar.className = 'message-avatar';
                avatar.textContent = '🌱';

                const aiContent = document.createElement('div');
                aiContent.className = 'message-content';

                const aiName = document.createElement('div');
                aiName.className = 'message-username';
                aiName.textContent = '小菜园AI助手';

                const aiMessage = document.createElement('div');
                aiMessage.className = 'message ai-message';
                aiMessage.textContent = aiResponse;

                aiContent.appendChild(aiName);
                aiContent.appendChild(aiMessage);
                aiWrapper.appendChild(avatar);
                aiWrapper.appendChild(aiContent);
                chatContainer.appendChild(aiWrapper);

                // 滚动到底部
                scrollToBottom();

            }, 1500 + Math.random() * 1000);
        }

        // 发送建议问题
        function sendSuggestedMessage(message) {
            messageInput.value = message;
            sendButton.disabled = false;
            // 可以选择自动发送或者让用户点击发送
            // sendMessage();
        }

        // 显示正在输入
        function showTypingIndicator() {
            const typingDiv = document.createElement('div');
            typingDiv.className = 'ai-message-wrapper';

            const avatar = document.createElement('div');
            avatar.className = 'message-avatar';
            avatar.textContent = '🌱';

            const indicator = document.createElement('div');
            indicator.className = 'typing-indicator';
            indicator.innerHTML = `
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            `;

            const aiContent = document.createElement('div');
            aiContent.className = 'message-content';

            const aiName = document.createElement('div');
            aiName.className = 'message-username';
            aiName.textContent = '小菜园AI助手';

            aiContent.appendChild(aiName);
            aiContent.appendChild(indicator);

            typingDiv.appendChild(avatar);
            typingDiv.appendChild(aiContent);
            chatContainer.appendChild(typingDiv);
            scrollToBottom();
        }

        // 滚动到底部
        function scrollToBottom() {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // AI回复逻辑 - 使用模板生成系统
        function getAIResponse(message) {
            const lowerMsg = message.toLowerCase();

            // 日常问候回复模板
            const greetingTemplates = [
                "#greeting# #casualGreeting# #intro#，#helpOffer#",
                "#greeting# #compliment# #casualGreeting# 有什么种植问题吗？",
                "#greeting# #encouragement# #casualGreeting# 我可以帮你解答种植问题~",
                "#greeting# #intro#，#casualGreeting# #helpOffer#"
            ];

            // 浇水相关回复模板
            const wateringTemplates = [
                "#greeting# 关于#wateringTopic#的问题，#wateringVegetable#需要#wateringFrequency#，建议在#wateringTime#进行。#wateringTip#是个好方法哦~",
                "不同蔬菜的#wateringTopic#需求确实不同！#wateringVegetable#一般#wateringFrequency#，记住要在#wateringTime#浇水，并且注意#wateringTip#。",
                "#wateringTopic#要根据蔬菜种类调整。#wateringVegetable#建议#wateringFrequency#，最佳时间是#wateringTime#，还要注意#wateringTip#。",
                "#compliment# 关于#wateringTopic#，#wateringVegetable#需要#wateringFrequency#，#wateringTime#是最佳时间，#wateringTip#很重要！"
            ];

            // 施肥相关回复模板
            const fertilizerTemplates = [
                "#greeting# 关于#fertilizerTopic#，#fertilizerStage#建议使用#fertilizerType#，#fertilizerFrequency#。#fertilizerTip#效果会更好！",
                "施肥要分阶段！#fertilizerStage#用#fertilizerType#，#fertilizerFrequency#，记住#fertilizerTip#。",
                "#fertilizerTopic#很重要！#fertilizerStage#建议#fertilizerFrequency#施#fertilizerType#，注意#fertilizerTip#。",
                "#compliment# #fertilizerStage#使用#fertilizerType#，#fertilizerFrequency#，#fertilizerTip#是关键！"
            ];

            // 病虫害相关回复模板
            const pestTemplates = [
                "#greeting# 遇到#pestTopic#不用慌！预防方面要#prevention#，治疗可以用#treatment#。告诉我具体是什么问题，我给你更详细的建议~",
                "#pestTopic#防治要早！#prevention#是关键，如果已经发生，试试#treatment#。",
                "对付#pestTopic#，#prevention#最重要。出现症状时用#treatment#，效果不错哦~",
                "#compliment# #pestTopic#防治，#prevention#是基础，#treatment#是手段，具体问题具体分析！"
            ];

            // 种植相关回复模板
            const plantingTemplates = [
                "#greeting# #currentSeason#很适合种#seasonVegetable#，比如#leafyVegetable#。#plantingMethod#，#plantingDepth#，#plantingDistance#种植。",
                "现在种植#seasonVegetable#正合适！#leafyVegetable#用#plantingMethod#，#plantingDepth#，#plantingDistance#。",
                "#currentSeason#推荐种#seasonVegetable#！#leafyVegetable#适合#plantingMethod#，#plantingDepth#，#plantingDistance#。",
                "#compliment# #currentSeason#种#seasonVegetable#，#plantingMethod#，#plantingDepth#，#plantingDistance#，注意#soilType#！"
            ];

            // 蔬菜介绍回复模板
            const vegetableIntroTemplates = [
                "#greeting# #rootVegetable#是很好的选择！它富含#nutrient#，需要#lightCondition#，#soilType#，#temperatureRange#，#humidityLevel#。#growthPeriod#可收获！",
                "#compliment# #cabbageVegetable#营养丰富，含有#nutrient#！#lightCondition#，#soilType#，#temperatureRange#，#humidityLevel#。#growthPeriod#成熟！",
                "#greeting# #solanaceousVegetable#种植很有趣！富含#nutrient#，需要#lightCondition#，#soilType#，#temperatureRange#。#growthPeriod#收获！",
                "#encouragement# #cucurbitVegetable#是很好的选择！含有#nutrient#，#lightCondition#，#soilType#，#temperatureRange#。#growthPeriod#可收获！"
            ];

            // 收获相关回复模板
            const harvestTemplates = [
                "#greeting# 关于收获，#harvestTip#很重要！#harvestTime#是最佳收获时间，#growthStage#要注意观察成熟度。",
                "#compliment# 收获时机很关键！#harvestTip#，#harvestTime#，#growthStage#要仔细观察！",
                "#encouragement# 收获是种植的快乐时刻！#harvestTip#，#harvestTime#，#growthStage#！"
            ];

            // 通用回复模板
            const generalTemplates = [
                "#greeting# #intro#，#helpOffer# 比如#wateringTopic#、#fertilizerTopic#、#pestTopic#、#plantingTopic#等，我都能为你解答！",
                "#greeting# 我是专业的种植顾问，#helpOffer# 关于#wateringTopic#、#fertilizerTopic#、#pestTopic#、#plantingTopic#的问题都可以问我~",
                "#greeting# #intro#，#helpOffer# 无论是#wateringTopic#、#fertilizerTopic#、#pestTopic#还是#plantingTopic#，我都很了解！",
                "#casualGreeting# #compliment# #helpOffer# 关于#wateringTopic#、#fertilizerTopic#、#pestTopic#、#plantingTopic#都可以问我！"
            ];

            // 日常问候回复
            if (lowerMsg.includes('你好') || lowerMsg.includes('嗨') || lowerMsg.includes('早上好') || lowerMsg.includes('下午好') || lowerMsg.includes('晚上好') || lowerMsg.includes('hi') || lowerMsg.includes('hello')) {
                return generateResponse(randomChoice(greetingTemplates));
            }

            // 浇水相关回复
            else if (lowerMsg.includes('浇水') || lowerMsg.includes('浇水频率') || lowerMsg.includes('多久浇水') || lowerMsg.includes('怎么浇水') || lowerMsg.includes('灌溉') || lowerMsg.includes('给水') || lowerMsg.includes('补水') || lowerMsg.includes('喷水')) {
                return generateResponse(randomChoice(wateringTemplates));
            }

            // 施肥相关回复
            else if (lowerMsg.includes('施肥') || lowerMsg.includes('肥料') || lowerMsg.includes('怎么施肥') || lowerMsg.includes('施什么肥') || lowerMsg.includes('营养') || lowerMsg.includes('追肥') || lowerMsg.includes('补肥')) {
                return generateResponse(randomChoice(fertilizerTemplates));
            }

            // 病虫害相关回复
            else if (lowerMsg.includes('虫') || lowerMsg.includes('病') || lowerMsg.includes('害') || lowerMsg.includes('生虫') || lowerMsg.includes('发黄') || lowerMsg.includes('防治') || lowerMsg.includes('预防') || lowerMsg.includes('治疗')) {
                return generateResponse(randomChoice(pestTemplates));
            }

            // 种植相关回复
            else if (lowerMsg.includes('种植') || lowerMsg.includes('什么时候种') || lowerMsg.includes('怎么种') || lowerMsg.includes('播种') || lowerMsg.includes('栽培') || lowerMsg.includes('育苗') || lowerMsg.includes('定植') || lowerMsg.includes('移栽')) {
                return generateResponse(randomChoice(plantingTemplates));
            }

            // 收获相关回复
            else if (lowerMsg.includes('收获') || lowerMsg.includes('采摘') || lowerMsg.includes('成熟') || lowerMsg.includes('什么时候收') || lowerMsg.includes('怎么收')) {
                return generateResponse(randomChoice(harvestTemplates));
            }

            // 根菜类相关回复
            else if (lowerMsg.includes('萝卜') || lowerMsg.includes('胡萝卜') || lowerMsg.includes('土豆') || lowerMsg.includes('红薯') || lowerMsg.includes('洋葱') || lowerMsg.includes('大蒜') || lowerMsg.includes('大头菜') || lowerMsg.includes('芜菁') || lowerMsg.includes('甜菜')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 白菜类相关回复
            else if (lowerMsg.includes('白菜') || lowerMsg.includes('生菜') || lowerMsg.includes('菠菜') || lowerMsg.includes('小白菜') || lowerMsg.includes('油麦菜') || lowerMsg.includes('茼蒿') || lowerMsg.includes('香菜') || lowerMsg.includes('芥菜') || lowerMsg.includes('甘蓝')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 茄果类相关回复
            else if (lowerMsg.includes('番茄') || lowerMsg.includes('西红柿') || lowerMsg.includes('茄子') || lowerMsg.includes('辣椒') || lowerMsg.includes('甜椒') || lowerMsg.includes('观赏椒')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 瓜类相关回复
            else if (lowerMsg.includes('黄瓜') || lowerMsg.includes('南瓜') || lowerMsg.includes('冬瓜') || lowerMsg.includes('丝瓜') || lowerMsg.includes('苦瓜') || lowerMsg.includes('西葫芦') || lowerMsg.includes('瓠瓜')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 豆类相关回复
            else if (lowerMsg.includes('豌豆') || lowerMsg.includes('蚕豆') || lowerMsg.includes('毛豆') || lowerMsg.includes('四季豆') || lowerMsg.includes('扁豆') || lowerMsg.includes('豇豆') || lowerMsg.includes('荷兰豆')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 绿叶菜类相关回复
            else if (lowerMsg.includes('芹菜') || lowerMsg.includes('韭菜') || lowerMsg.includes('苋菜') || lowerMsg.includes('空心菜') || lowerMsg.includes('莴笋') || lowerMsg.includes('雪里蕻')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 葱蒜类相关回复
            else if (lowerMsg.includes('大葱') || lowerMsg.includes('小葱') || lowerMsg.includes('火葱') || lowerMsg.includes('蒜苔')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 食用菌类相关回复
            else if (lowerMsg.includes('蘑菇') || lowerMsg.includes('香菇') || lowerMsg.includes('平菇') || lowerMsg.includes('金针菇') || lowerMsg.includes('木耳') || lowerMsg.includes('草菇') || lowerMsg.includes('竹荪')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 营养相关回复
            else if (lowerMsg.includes('营养') || lowerMsg.includes('维生素') || lowerMsg.includes('蛋白质') || lowerMsg.includes('膳食纤维') || lowerMsg.includes('矿物质')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 环境条件相关回复
            else if (lowerMsg.includes('光照') || lowerMsg.includes('阳光') || lowerMsg.includes('土壤') || lowerMsg.includes('温度') || lowerMsg.includes('湿度') || lowerMsg.includes('通风')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 生长周期相关回复
            else if (lowerMsg.includes('生长周期') || lowerMsg.includes('生长期') || lowerMsg.includes('多久成熟') || lowerMsg.includes('多长时间') || lowerMsg.includes('几天')) {
                return generateResponse(randomChoice(vegetableIntroTemplates));
            }

            // 季节相关回复
            else if (lowerMsg.includes('现在') || lowerMsg.includes('最近') || lowerMsg.includes('季节') || lowerMsg.includes('适合') || lowerMsg.includes('什么时候') || lowerMsg.includes('眼下') || lowerMsg.includes('目前')) {
                return generateResponse(randomChoice(plantingTemplates));
            }

            // 感谢和赞美回复
            else if (lowerMsg.includes('谢谢') || lowerMsg.includes('感谢') || lowerMsg.includes('很棒') || lowerMsg.includes('很好') || lowerMsg.includes('不错')) {
                return randomChoice(vegetableKnowledge.compliments) + " " + randomChoice(vegetableKnowledge.encouragements) + " 还有什么其他问题吗？";
            }

            // 其他问题回复
            else {
                return generateResponse(randomChoice(generalTemplates));
            }
        }

        // 页面加载完成后滚动到底部
        window.addEventListener('load', scrollToBottom);
    </script>
</body>

</html>